import React, { Component } from "react"
import { View } from "react-native"
import { observer, inject } from "mobx-react"
import { CheckLoginModal } from "../check-login-modal"

export interface AuthProps {
  rootStore: any
  navigation?: any
}

export interface AuthState {
  show: boolean
}

export default WrappedComponent => {
  @inject("rootStore")
  @observer
  class AuthComponent extends Component<AuthProps, AuthState> {
    state = {
      show: true
    }

    closeModal = navigation => {
      this.setState({
        show: false
      })
      navigation.goBack()
    }

    render() {
      const globalStore = this.props.rootStore.globalStore
      return (
        <View style={{ flex: 1 }}>
          {!globalStore.isLogin ? (
            <CheckLoginModal
              modalVisible={this.state.show}
              closeModal={() => this.closeModal(this.props.navigation)}
              toLogin={() => {
                this.setState({ show: false })
                this.props.navigation.navigate("Login")
              }}
            />
          ) : (
            <WrappedComponent {...this.props} />
          )}
        </View>
      )
    }
  }

  return AuthComponent
}
